<!-- 这里是Home下 权限管理 -> 角色分配界面 -->
<template>
  <div>
      <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

     <!-- 卡片视图区 -->
    <el-card>
        <el-row>
            <el-col>
                <!-- 添加角色按钮区 -->
                <el-button type="primary">添加角色</el-button>
            </el-col>
        </el-row>

        <!-- 渲染角色权限区 -->
        <el-table :data="roleList" border stripe>
            <!-- 展开列 -->
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <div class="table_item_container" v-for="item1 in scope.row.children" :key="item1.id">
                        <div class="left">
                            <el-tag  closable @close="removeRightById(scope.row,item1.id)">{{item1.authName}}</el-tag>
                        </div>
                        <!--通过for循环渲染2-3级权限 -->

                        <div class="right">
                            <!-- <el-row v-for="item2 in item1.children" :key="item2.id">
                                <el-col :span="9">
                                    <el-tag>{{item2.authName}}</el-tag>
                                </el-col>
                            </el-row> -->
                            <div class="right_container" v-for="item2 in item1.children" :key="item2.id" >
                                <div class="right_le">
                                    <el-tag  type="success" closable @close="removeRightById(scope.row,item2.id)">{{item2.authName}}</el-tag>
                                </div>
                                <div class="right_ri">
                                    <el-tag v-for="item3 in item2.children" :key="item3.id" closable type="warning" @close="removeRightById(scope.row,item3.id)" >
                                        {{item3.authName}}
                                    </el-tag>
                                </div>
                            </div> 
                        </div>
                    </div>
                </template>
            </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="角色名称" prop="roleName"></el-table-column>
            <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
            <el-table-column label="角色描述" min-width="400px">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" @click = "handleEditRoles(scope,row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete">删除</el-button>
                    <el-button type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <!-- 分配权限对话框 -->
    <el-dialog
        title="分配权限"
        :visible.sync="setRightDialogVisible"
        width="50%"
        @close="setRightDialogClose"
        >
        <!-- 内容主题区 -->
        <!-- 树形展示控件 -->
       <el-tree :data="rightsList" :props="treeProps" show-checkbox node-key="id" :default-expand-all="true" :default-checked-keys="defKeys" ref="treeRef"></el-tree>
       <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="setRightDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="allotRights">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
        //所有角色列表数据
        roleList:[],
        //控制分配权限按钮的显示于隐藏
        setRightDialogVisible: false,
        //分配权限数据数组
        rightsList: [],
        //树形控件的属性绑定对象
        treeProps: {
            label:'authName',
            children: 'children'
        },
        //默认被选中的节点id值的数组
        defKeys:[],
        //当前即将分配权限的id值
        roleId: ''
    };
  },
  created() {
      //获取角色列表信息
      this.getRoleList()
  },
  methods:{
    async getRoleList(){
     const {data:res} = await this.$http.get('roles')
     console.log(res)
     if(res.meta.status !== 200) return this.$message.error("获取列表信息失败！")
     this.roleList = res.data
    },
    //根据ID删除对应的权限
    removeRightById(role, rightsId) {
        //弹框提示用户是否要删除
        this.$confirm('此操作将删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
            //确定删除发起请求删除对应ID下的对应权限ID
            const{ data:res } = await this.$http.delete(`roles/${role.id}/rights/${rightsId}`)
            if(res.meta.status !== 200) return this.$message.error("删除权限失败！")
            this.$message.success("删除权限成功！")
            role.children = res.data
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
            //取消删除
          this.$message({
            type: 'info',
            message: '已取消删除！'
          });          
        });
    },
    //分配权限按钮处理函数
    async showSetRightDialog(role){
        //保存id在data中为删除做准备
        this.roleId = role.id
        //发起请求获取权限列表
        const { data:res } = await this.$http.get('rights/tree')
        if(res.meta.status !== 200) return this.$message.error("请求失败！")
        //赋值三级权限到tree上
        this.rightsList= res.data
        this.getNodeList(role,this.defKeys)
        this.setRightDialogVisible = true
    },
    //获取三级节点函数
    getNodeList(role, arr) {
        //递归判断是否有子节点，如果没有则将最后一级权限的id值存入数组中！
        if(!role.children){
            arr.push(role.id)
        }else{
            role.children.map(item => {
                this.getNodeList(item,arr)
            })
        }
    },
    //监听Dialog关闭事件，清空数组
    setRightDialogClose(){
        this.defKeys = []
    },
    //点击为角色分配权限函数
    async allotRights(){
        const keys = [
            ...this.$refs.treeRef.getCheckedKeys(),
            ...this.$refs.treeRef.getHalfCheckedKeys()
        ]
        const idStr = keys.join(',')
        const { data:res } = await this.$http.post(`roles/${this.roleId}/rights`,{
            rids: idStr
        })
        if(res.meta.status !== 200) return this.$message.error("分配权限失败！")
        this.$message.success("分配权限成功！")
        //同步视图等
        this.getRoleList()
        this.setRightDialogVisible = false
    }
 }
  
}

</script>
<style lang='less' scoped>
    .table_item_container{
        display: flex;
        width: 100%;
        border-bottom: 1px solid #ddd;
        .left{
            display: flex;
            flex-direction: column;
            flex: 25%;
            align-items: center;
            justify-content: center;
        }
        .right{
            flex: 75%;
            display: flex;
            flex-direction: column;
            .right_container{
                display: flex;
                .right_le{
                    display: flex;
                    align-items: center;
                    flex: 30%;
                    .el-tag{
                        margin-top: 7px;
                    }
                }
                .right_ri{
                    flex: 70%;
                    .el-tag{
                        margin-top: 7px;
                    }
                }
            }
        }
    }
</style>